import React, { Component } from 'react'
import { Card } from 'components/Base'
import { Icon } from '@kube-design/components'
import styles from './index.scss'

export default class PersonCenter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      status: 0,
      userName: 'admin',
      timeRangeText: '下午好',
      weather: '多云',
      location: '西安市',
      temperature: '20-25°C',
    }
  }

  render() {
    return (
      <Card className={styles.personCenterContainer} title="个人中心">
        <div className={styles.level}>
          <div className={styles.userInfo}>
            {this.state.userName} {this.state.timeRangeText}，欢迎使用PaaS云平台
          </div>
          <div className={styles.resourceInfo}>
            资源占用
            {this.state.status === 0 ? (
              <span className={styles.overloadStatus}>超载</span>
            ) : (
              <span className={styles.normalStatus}>正常</span>
            )}
            ，合理使用资源哦。
          </div>
        </div>
        <div className={styles.whether}>
          <Icon name="cloud" size="small" style={{ marginRight: 2 }} />
          &nbsp;{this.state.weather}&nbsp;&nbsp;{this.state.location}
          &nbsp;&nbsp;
          {this.state.temperature}
        </div>
      </Card>
    )
  }
}
